import { reactive } from 'vue';
import merge from 'lodash/merge';

export const myTheme = reactive({
  common: {
    textColor1: '#333333',
    primaryColor: '#3a77e2',
    primaryColorHover: '#4098fc',
    primaryColorPressed: '#1060c9',
    infoColor: '#18a058',
    infoColorHover: '#36ad6a',
    infoColorPressed: '#0c7a43',
    fontSize: '14px',
    fontSizeTiny: '',
    fontSizeSmall: '',
    fontSizeMedium: '',
    fontSizeLarge: '',
    fontSizeHuge: '',
    lineHeight: '',
    heightTiny: '',
    heightSmall: '',
    heightMedium: '',
    heightLarge: '',
    heightHuge: '',
  },
  Menu: {
    borderRadius: 0,
  },
  Button: {
    textColor: '#3a77e2',
  },
});
export const overrideTheme = function (options) {
  merge(myTheme, options);
};
export const setFontSize = function (val) {
  myTheme.common.fontSize = val + 'px';
  myTheme.common.fontSizeTiny = val - 2 + 'px';
  myTheme.common.fontSizeSmall = val + 'px';
  myTheme.common.fontSizeMedium = val + 'px';
  myTheme.common.fontSizeLarge = val + 1 + 'px';
  myTheme.common.fontSizeHuge = val + 2 + 'px';
  myTheme.common.lineHeight = `${(val / 14) * 1.6}`;
  myTheme.common.heightTiny = val + 8 + 'px';
  myTheme.common.heightSmall = val + 12 + 'px';
  myTheme.common.heightMedium = val + 20 + 'px';
  myTheme.common.heightLarge = val + 26 + 'px';
  myTheme.common.heightHuge = val + 32 + 'px';

  document.documentElement.style.setProperty('--rd-font-size1', val - 2 + 'px');
  document.documentElement.style.setProperty('--rd-font-size2', val + 'px');
  document.documentElement.style.setProperty('--rd-font-size3', val + 2 + 'px');
  document.documentElement.style.setProperty('--rd-font-size4', val + 6 + 'px');
  document.documentElement.style.setProperty('--rd-font-size5', val + 10 + 'px');
  document.documentElement.style.setProperty('--rd-font-size6', val + 16 + 'px');
};
